<template>
  <div>
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/start' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <a>视频</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>专栏操作</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%" height="500">
        <el-table-column v-for="item in tableItem" :key="item.id" :prop="item.prop" :label="item.label" :width="columWidth(item.prop)">
          <template slot="header">
            <input
              type="text"
              class="searchInput"
              @input="chooseSearchVideo"
              placeholder="输入关键字搜索"
              v-model="searchVideo"
              v-if="item.prop == 'option'"
            />
            <span v-if="item.prop != 'option'">{{ item.label }}</span>
          </template>
          <template slot-scope="scope">
            <span
              v-if="
                item.prop !== 'option' &&
                item.prop !== 'time' &&
                item.prop !== 'avatar' &&
                item.prop !== 'poster'
              "
            >{{ scope.row[item.prop] }}</span>
            <img :src="scope.row.avatar" alt v-if="item.prop === 'avatar'" />
            <div v-if="item.prop === 'poster'" style="position: relative">
              <img :src="scope.row.poster" alt style="width: 230px; height: 100px; borderRadius: 10px" />
              <div class="player" @click="playVideo(scope.row)">
                <div class="box">
                  <h1>READ</h1>
                </div>
              </div>
            </div>
            <span v-if="item.prop === 'time'">
              {{
              scope.row[item.prop] | formatTime
              }}
            </span>
            <el-button type="danger" v-if="item.prop === 'option'" @click="startDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span class="error">你确定要删除该视频吗(不可改变)</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <transition name="fadeIn">
      <div v-if="showVideo">
        <div class="black" @click="closeVideo"></div>
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>标题: {{ title}}</span>
              <span style="marginLeft:20px">用户名: {{username}}</span>
              <span style="marginLeft:20px">昵称: {{realname}}</span>
            </div>
            <div v-html="prod">{{prod}}</div>
          </el-card>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import format from '../../formatTime'
import { Component, Vue } from 'vue-property-decorator'
@Component({
  filters: {
    formatTime: (val: string) => {
      return format(val)
    }
  }
})
export default class opVideo extends Vue {
  private tableData: Array<any> = []
  private tableDataAll: Array<any> = []
  private searchVideo: string = ''
  private prod: string = ''
  private poster: string = ''
  private showVideo: boolean = false
  private dialogVisible: boolean = false
  private id: number = 0
  private username: string = ''
  private title: string = ''
  private realname: string = ''
  private tableItem: Array<object> = [
    { id: '0', prop: 'id', label: 'id' },
    { id: '6', prop: 'avatar', label: '头像' },
    { id: '8', prop: 'title', label: '标题' },
    { id: '1', prop: 'poster', label: '专栏' },
    { id: '2', prop: 'time', label: '创建时间' },
    { id: '3', prop: 'username', label: '用户名' },
    { id: '4', prop: 'realname', label: '昵称' },
    { id: '7', prop: 'format', label: '格式' },
    { id: '5', prop: 'option', label: '操作' }
  ]
  get columWidth() {
    return function (val: string) {
      if (val === 'id') return 70
      if (val === 'avatar') return 90
      return val === 'poster' ? 250 : 0
    }
  }
  created() {
    this.getAllVideoList()
  }
  chooseSearchVideo(): void {
    this.tableData = this.tableDataAll.filter(item => {
      let f = new RegExp(this.searchVideo, 'g')
      return f.test(item.username)
    })
  }
  confirm() {
    this.$axios
      .post('/prod/del', {
        id: this.id,
        status: this.$store.state.user.userInfo.status,
        username: this.$store.state.user.userInfo.username
      })
      .then(res => {
        console.log(res)
        if (res.data.error === -1) {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.dialogVisible = false
          this.getAllVideoList()
        } else {
          this.$message({
            type: 'error',
            message: '删除失败'
          })
          this.dialogVisible = false
        }
      })
  }
  startDel(val: any): void {
    this.dialogVisible = true
    this.id = val.id
  }
  closeVideo(): void {
    this.showVideo = false
  }
  playVideo(val: any): void {
    this.prod = val.text
    this.title = val.title
    this.username = val.username
    this.realname = val.realname
    this.showVideo = true
  }
  getAllVideoList() {
    this.$axios
      .get('/prod/search')
      .then(res => {
        console.log(res)
        if (res.data.error == -1) {
          let videoList = res.data.data.filter((item: any) => {
            return item.way === 'text'
          })
          this.tableData = videoList
          this.tableDataAll = videoList
        } else if (res.data.error == 0) {
          this.tableData = []
        }
      })
      .catch(err => {
        alert('服务器错误')
      })
  }
}
</script>

<style lang="less" scoped>
@import url('../../assets/css/animate.css');
.bread {
  margin: 25px;
}
.error {
  color: red;
}
img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}
.black {
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.6);
}
video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  transform: translate(50%, 50%);
  width: 50%;
  height: 300px;
}
.player {
  opacity: 0.7;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  // transform: translate(50%, 50%);
  .box {
    width: 230px;
    height: 100px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
  }
  .box:hover h1 {
    color: red;
  }
  h1 {
    color: #dcdfe6;
    position: absolute;
    margin: 0 auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s linear;
  }
}
.table {
  margin-top: 25px;
  padding: 0 15px;
}
.searchInput {
  border-radius: 3px;
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  outline: none;
  &:focus {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
  }
}
.box-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 60%;
  height: 500px;
  z-index: 9;

  .clearfix {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  span {
    margin: 0 10px;
  }
}
</style>